<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <div id="app">
        <button @click="getFn">get请求</button>
        <button @click="postFn">post请求</button>
        <button @click="putFn">put请求</button>
    </div>
</body>
<script>
    const app=new Vue({
        el:"#app",
        methods: {
            getFn(){
                axios.get('http://127.0.0.1/user?name="张三"')
                .then((res)=>{//处理成功时的回调
                    console.log(res)
                }).catch((err)=>{//错误时的回调
                    console.log(err)
                })
            },
            postFn(){
                axios.post('http://127.0.0.1/book',
                    {
                        name:"张三",
                        age:18
                    }
                )
                .then((res)=>{//处理成功时的回调
                    console.log(res)
                }).catch((err)=>{//错误时的回调
                    console.log(err)
                })
            },
            putFn(){
                axios.put('http://127.0.0.1/car',
                    {
                        name:"丰田",
                        price:7821
                    }
                )
                .then((res)=>{//处理成功时的回调
                    console.log(res)
                }).catch((err)=>{//错误时的回调
                    console.log(err)
                })
            }
        },
    })
</script>
</html>